<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	pageContext.setAttribute("path",request.getContextPath());
%>
<%@taglib prefix="s" uri="/struts-tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.rotate.js"></script>



 <link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="js/lightbox/jquery.lightbox.min.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($){
      $('.lightbox').lightbox();
    });
  </script>



<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
				jQuery.noConflict(); //将变量$的控制权让渡给jquery.js,解决冲突问题
				jQuery(document).ready(function(){

						//浏览器窗口变化	
							cover();
						$(window).resize(function(){ 						
							cover();
							
							});
					
						//简介页面出现
						$("#image01").click(function(){
									$("#fuwu_div").fadeOut();			
									$("#jianjie_div").fadeIn(1000);						
							});
						//服务范围
						$("#image02").click(function(){
									$("#jianjie_div").fadeOut();			
									$("#fuwu_div").fadeIn(1000);					
							});
					
					
						//标题栏和下划线的淡入
										 $("#image01").fadeIn(3000);
										 $("#image02").fadeIn(3000);
										 $("#image03").fadeIn(3000);
										 $("#image04").fadeIn(3000);
										 $("#image05").fadeIn(3000);
										 $("#image06").fadeIn(3000);
										 
										 
								var  $slider = jQuery(".curBg1")
										$liCur = jQuery("#image01"),
				  					curP = -1,
				  					curW = -1;
				  					
										$navBox = jQuery(".imag");
										 $targetEle = jQuery(".cur"),
										 
										
										$targetEle.mouseenter(function () {
										  var $_parent = jQuery(this).parent().parent(),
											_width = $_parent.outerWidth(true),
											posL = $_parent.position().left;
										  jQuery(".curBg1").stop(true, true).animate({
											"left":posL,
											"width":_width
										  }, "fast");
										});
										

									}); 
						function cover(){
						 	var win_width = $(window).width();
							var win_height = $(window).height();
							
							$(".box").css({
								width:win_width,
								height:win_height
								});
							$("#bigpicarea").css({
								width:win_width,
								height:win_height
								});
							$(".images").css({
								width:win_width,
								height:win_height
								});
							//顶部logo
							$("#ding_logo_div").css({
								left:win_width*0.5-win_width*0.1*0.7,
								top:0
								});
							$("#ding_logo").css({
								width:win_width*0.1,
								height:win_height*0.1
								});
								
							//底部logo
							$("#bottom_logo_div").css({
								left:win_width*0.5-win_width*0.05*0.9,
								bottom:0
								});
							$("#bottom_logo").css({
								width:win_width*0.05,
								height:win_height*0.08
								});
							$("#bottom_di_div").css({
								left:win_width*0.5-win_width*0.04,
								bottom:0
								});
							$("#bottom_di").css({
								width:win_width*0.04,
								height:win_height*0.024
								});
								
							
							$(".nav").css({
								 width:win_width,
								});
								
							$("#box1").css({
								width:win_width,
								
								bottom:0
								});
							//尖角背景里面的内容
							$("#box1").find('p').css({
								
								});
							$("#content").css({
								top:win_height*0.199
								});
								
								
							$("#boximage").css({
								width:win_width,
								height:win_height-8,
								bottom:0
								});
							
							//光标样式
							$(".curBg1").css({
								top:win_height*0.055,
								
								});
								
							//标题栏字体样式
							$("#images01").css({
								width:win_width*0.04,
								height:win_height*0.03
								});
							$("#image01").css({
								left:win_width*0.1,
								top:win_height*0.02
								});
								
							$("#images02").css({
								width:win_width*0.055,
								height:win_height*0.0299
								});
							$("#image02").css({
								left:win_width*0.19,
								top:win_height*0.02
								});
							$("#images03").css({
								width:win_width*0.035,
								height:win_height*0.031
								});
							$("#image03").css({
								left:win_width*0.30,
								top:win_height*0.02
								});
							$("#images04").css({
								width:win_width*0.034,
								height:win_height*0.03
								});
							$("#image04").css({
								left:win_width*0.613,
								top:win_height*0.02
								});
							$("#images05").css({
								width:win_width*0.036,
								height:win_height*0.038
								});
							$("#image05").css({
								left:win_width*0.703,
								top:win_height*0.015
								});
							$("#images06").css({
								width:win_width*0.055,
								height:win_height*0.03
								});
							$("#image06").css({
								left:win_width*0.793,
								top:win_height*0.018
								});
								
								
								
								
							//简介样式
							$("#jianjie_div").css({
								left:win_width*0.5-win_width*0.32*0.5,
								bottom:win_height*0.4
								});
							$("#jianjie").css({
								width:win_width*0.32,
								height:win_height*0.13
								});
							//服务范围样式
							$("#fuwu_div").css({
								left:win_width*0.5-win_width*0.4*0.5,
								bottom:win_height*0.3
								});
							$("#fuwu").css({
								width:win_width*0.38,
								height:win_height*0.4
								});
								
							//新闻块布局
							$(".xinwen_content").css({
								width:win_width*0.4,
								"margin-left":win_width*0.5-win_width*0.4*0.55
								});
							$(".xinwen_detail").css({
								
								});
							$(".xinwen_content_2").css({
								width:win_width*0.4,
								"margin-left":win_width*0.12
								});
							$("#content").css({
								width:win_width,
								});
							$(".fontsize").css({
								"font-size":win_width*0.01
								});
							$(".fontsize_1").css({
								"font-size":win_width*0.038
								});
							$(".fontsize_2").css({
								"font-size":win_width*0.014
								});
							
							
						
						}
						var target = ["5icool-01", "5icool-02", "5icool-03", "5icool-04", "5icool-05"];
</script>


<link href="css/5icool.org.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/5icool.org.js" ></script>

</head>
<body style="background:url('images/ping.png')">
	<!--顶部导航栏-->

			
		<div id="back"  style='clear:both;z-index:1;position:absolute;border:0px solid red;background-color:gray;height:33px;width:100%;'></div>
		<div style='height:8px;width:100%;background-color:black;z-index:3;position:absolute;'> </div>
				
					<!--导航标题-->
							<div class='imag' style='position:absolute;z-index:3;display:none' id='image01'> 
								<a href="#">
							    <img src='images/detail.png' id='images01' class="cur"/>
							  </a>
					    </div>
					    <div class='imag' style='position:absolute;z-index:3;display:none' id='image02'> 
					    	<a href="#">
							    <img src='images/detail2.png' id='images02' class="cur"/>
							    </a>
					    </div>
					    <div class='imag' style='position:absolute;z-index:3;display:none' id='image03'> 
					    	<a href="#">
							    <img src='images/detail3.png' id='images03' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image04'> 
					     	<a href="#">
							    <img src='images/detail4.png' id='images04' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image05'> 
					     	<a href="#">
							    <img src='images/detail5.png' id='images05' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image06'> 
					     	<a href="#">
							    <img src='images/detail6.png' id='images06' class="cur"/>
							    </a>
					    </div>
					    
					    <!-- 光标下划线 -->
					    <div class="curBg1" style='position:absolute;z-index:3;display:none'></div>
					    <div class="cls" style='position:absolute;z-index:3;display:none'></div>
				 
					    
						<!-- 简介页面 -->			 
							 
					     <div id='jianjie_div' style='position:absolute;z-index:3;display:none' > 					     	
							    <img src='images/jianjie.png' id='jianjie'/>
					    </div>
					    
					  <!-- 服务范围页面 -->			 
					     <div id='fuwu_div' style='position:absolute;z-index:3;display:none' > 					     	
							    <img src='images/fuwu.png' id='fuwu'/>
					    </div>
						
		
	<!--顶部中心图标-->
		<div id="ding_logo_div" style='z-index:5;position:absolute;border:0px solid blue'>
				<img src='images/ding_logo.png' id="ding_logo"/>	
			</div>
		<!--背景尖角图标-->	
			<div id='box1' style='position:absolute;border:0px solid green;margin:0;z-index:2;'>
					<img src='images/title.png' id='boximage' style='margin:0;position:absolute;z-index:2'/>		
						
			</div>
			<div style="position:absolute;border:0px solid red;z-index:2;background:url('images/ping.png');" id='content'>
				<s:set name="news" value="#request.news"></s:set>
				<!--新闻详情页-->	
					<div style='border:0px solid red;width:50%;margin-top:1%;' class='xinwen_content'>
						
						<!--新闻图片-->	
						<div id="slideShowContainer" >
						    <div id="slideShow">
						    	<ul>
						        	<s:iterator var="image" value="#news.images" status="stu">
						    				<li><a href='<s:property value="#image.imageSrc"/>' class="lightbox" rel="group1"><img src='<s:property value="#image.imageSrc"/>' width="100%" alt="#image.imageId" /></a></li>
									</s:iterator>
						           
						        </ul>
						      </div>    
						      
								    <a id="previousLink" href="#" >&raquo;</a>
								    <a id="nextLink" href="#" >&laquo;</a>
								
								<!--新闻内容-->	
								    <div style='width:510px;border:0px solid blue;background-color:#FFFFFF;margin-top:500px;position:absolute;' class='xinwen_detail'>
											<div style="font-size:23px;font-family:黑体;margin:10px 10px 10px 10px;" class='detail_title'>
												<s:property value="#news.title"/>
											</div>
											<div style='margin:10px 10px 60px 10px' class='detail_content'>
												<s:property value="#news.content" escape="false"/>
											</div>
										
						           </div>
								   
						</div>
						<!--<div id="wowslider-container1" style='width:100%'>
								<div class="ws_images" style='width:100%'>
									<a href=""><img src="data1/images/blue_hills.jpg"  class="img_detail"/></a>
									<a href=""><img src="data1/images/sunset.jpg"  class="img_detail"/></a>
									<a href=""><img src="data1/images/water_lilies.jpg"  class="img_detail" /></a>
									<a href=""><img src="data1/images/winter.jpg"   class="img_detail"/></a>
									
								</div>
								<script type="text/javascript" src="engine1/script.js"></script>
						</div>-->
						
						
					</div>
	
				
					
					
				
				<!--底部中心图标-->	
							<div style="margin-top:100px">
								<div style='z-index:5;position:fixed;border:0px solid blue;bottom:0;' id="bottom_logo_div">
									<img src='images/bottom_logo.png' id="bottom_logo"/>	
								</div>
								<div style='z-index:4;position:fixed;border:0px solid blue;bottom:0;' id="bottom_di_div">
									<img src='images/di.png' id="bottom_di"/>	
								</div>
								<div style='height:8px;width:100%;background-color:black;z-index:3;position:fixed;border:0px solid blue;bottom:0;' > </div>
								</div>
		</div>
				
						
					
	
					
	 <div class="box" style='margin:0;border:0px solid blue;z-index:-1;position:absolute'>
    	<div id="bigpicarea" style="margin:0;border:0px solid red;z-index:-1;position:absolute">
        <p class="bigbtnPrev"><span id="big_play_prev"></span></p>
        <div id="image_5icool-01" class="image" style="opacity: 1; display: block; ">
            <a href=""  >
                <img src="images/shou_1.jpg" class='images'></a>
            <div class="word" style="display: block;"></div>
        </div>
      </div>
        <!--幻灯片背景
        <div id="image_5icool-02" class="image" style="opacity: 0; display: none; ">
            <a href="" >
                <img  src="images/homenew2_10.jpg" class='images'></a>
            <div class="word"></div>
        </div>
        <div id="image_5icool-03" class="image" style="opacity: 0; display: none; ">
            <a href="" >
                <img  src="images/homenew3_10.jpg" class='images'></a>
            <div class="word"></div>
        </div>
        <div id="image_5icool-04" class="image" style="opacity: 0; display: none; ">
            <a href="" >
                <img  src="images/homenew4_10.jpg" class='images'></a>
            <div class="word"></div>
        </div>
        <div id="image_5icool-05" class="image" style="opacity: 0; display: none; ">
            <a href="" >
                <img  src="images/homenew5_10.jpg" class='images'></a>
            <div class="word"></div>
        </div>
       
					
        
         <p class="bigbtnNext"><span id="big_play_next"></span></p>
    </div>
	 </div>-->
		
		
		
			
		
			
			
	
</body>

</html>